<script setup>

//注册页面
import {User, Lock, Message, CircleCheck} from "@element-plus/icons-vue";
import router from "@/router/index.js";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {post} from "@/net/index.js";

// 注册表单
const form = reactive({
  username: '',
  password: '',
  password_repeat: '',
  email: '',
  code: ''
})

// 自定义校验规则,一定要定义在前面,否则后面无法使用
const validateUserName = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入用户名'))
    // 检验用户名是否符合正则规则
  } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)) {
    callback(new Error("用户名不能包含特俗字符,只能是英文/中文"))
  }else {
    // 没问题,通过了callback
    callback()
  }
}

// 校验两次密码是否一致
const validateRepeatPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.password) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}


// 定义表单校验的规则
const rules = {
  username: [
    //   使用自定义校验规则,点击和更改的时候都会触发
    { validateUserName, trigger: ['blur','change']},
    {min: 3, max: 8, message: '用户名长度必须在2个到八个字符之间', trigger: ['blur','change']},
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['blur','change'],
    },
    {min: 8, max: 16, message: '密码长度必须在8到16位之间', trigger: ['blur','change']},
  ],
  password_repeat: [
    { validateRepeatPassword, trigger: ['blur','change']},
  ],
  email: [
    {
      required: true,
      message: '请输入邮件地址',
      trigger: ['blur','change'],
    },
    {
      type: 'email',
      message: '请输入合法的邮件地址',
      trigger: ['blur', 'change'],
    },
  ],
  code: [
    { required: true, message: '请输入邮箱验证码', trigger: ['blur','change']},
  ],
}

// 检验电子邮件是否有效,电子邮箱有效后发送验证码按钮变为可以点击
const isEmailValid = ref(false)
// 拿到整个表单的引用
const formRef = ref()
// 控制按钮是否置灰,当点击发送验证码之后,一分钟内该按钮置灰
const coldTime = ref(0)

// 邮箱校验通过,就设置获取验证码按钮为可见
const onValidate = (prop,isValid) => {
  if (prop === 'email')
    isEmailValid.value = isValid
}

// 对整个表单进行校验的函数,这个会把表单里面的所有内容进行检查
const register = () => {
    // 进行校验,第一个参数是是否通过
    formRef.value.validate((isValid)=>{
      if (isValid){
        post('/api/auth/register',{
          username: form.username,
          password: form.password,
          email: form.email,
          code: form.code
        },(message)=>{
          ElMessage.warning(message)
          // 回调成功之后跳转到登入界面
          router.push("/")
        })
      }else {
        ElMessage.warning('请完整填写表单')
      }
    })
}

//获取验证码的方法,参数传递表单中的数据,将这个函数绑定给点击获取验证码事件
const validateEmail = () => {
  /**
   * 发送验证码之后冷却时间定为60秒
   * 设置定时器每秒钟减少一次
   */
  coldTime.value = 60
  post("/api/auth/validateEmail",{
    email: form.email,
  },(message)=>{
    ElMessage.warning(message)
    setInterval(()=>
      coldTime.value--,1000
    )
  },()=>{
    ElMessage.warning('发送验证码失败')
    coldTime.value = 0
  })
}

</script>

<template>
  <!-- 注册表单 -->
  <div style="text-align: center;margin: 20px">
    <div style="text-align: center;margin-top: 100px">
      <!--   提示部分       -->
      <div style="font-size: 25px;font-weight: bold">注册新用户</div>
      <div style="font-size: 10px;color: gray">欢迎注册,请填写相关信息</div>
      <div style="margin-top: 50px">
        <!--   使用el表单,绑定我们的表单,设置表单回调成功事件onValidate, 设置整个表单的引用   -->
        <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
          <!--   prop表单项绑定的的属性       -->
          <el-form-item prop="username">
            <el-input v-model="form.username" type="text" placeholder="用户名">
              <template #prefix>
                <el-icon>
                  <User/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <!--    限定密码长度最大为十六位        -->
            <el-input v-model="form.password"  :maxlength="16" type="text" placeholder="密码">
              <template #prefix>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password_repeat">
            <el-input v-model="form.password_repeat" :maxlength="16" type="text" placeholder="确认密码">
              <template #prefix>
                <el-icon>
                  <Lock/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="email">
            <el-input v-model="form.email" type="email" placeholder="请输入邮箱">
              <template #prefix>
                <el-icon>
                  <Message/>
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="code">
            <!--   gutter是下面row之间的间隔     -->
            <el-row gutter="10" style="width: 80%">
              <el-col :span="17">
                <el-input v-model="form.code" :maxlength="6" type="text" placeholder="请输入验证码">
                  <template #prefix>
                    <el-icon>
                      <CircleCheck/>
                    </el-icon>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="5">
                <!--    先置灰按钮如果没有点击输入邮箱isEmailValid或者冷却时间大于0   -->
<!--                <el-button  @click="validateEmail" type="success"
                            :disabled="!isEmailValid || coldTime > 0 ">获取邮箱验证码</el-button>-->
                                <el-button  @click="validateEmail" type="success"
                            :disabled="!isEmailValid || coldTime > 0 ">
                                  {{
                                    coldTime > 0 ? '请稍后' + coldTime + '秒' : '获取验证码'
                                  }}
                                </el-button>

              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>

      <div style="margin: 10px;">
        <el-button @click="register" type="warning" style="width: 200px">注册</el-button>
      </div>
      <!--  有账号跳转到登入界面  -->
      <div style="margin: 60px;margin-top: 10px">
        <span style="font-size: 15px">已有账号?</span>
        <el-link @click="router.push('/')" type="primary" style="width: 200px;font-weight: bold;translate:  0 -2px">
          回到登入界面
        </el-link>
      </div>

    </div>
  </div>
</template>

<style scoped>

</style>